<template>
  <div class="company-container">
    <!-- 顶部导航 -->
    <header class="header">
      <nav class="nav-bar">
        <span class="nav-item active">首页</span>
        <span class="nav-item">果园商团</span>
      </nav>
      <div class="header-content">
        <h1 class="company-title">
          <div>朝阳大北方农业有限公司</div>
          <div class="en-title">CHAOYANG DABEFANG AGRICULTURAL CO.,LTD.</div>
        </h1>
        <div class="slogan">
          <div>引领业界，创造幸福</div>
          <div class="en-slogan">LEADING THE INDUSTRY AND CREATING HAPPLNESS</div>
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <main class="main-content">
      <!-- 集团介绍 -->
      <section class="section intro-section">
        <h2 class="section-title">
          集团介绍
          <span class="more-link">>></span>
        </h2>
        <p class="intro-text">
          朝阳大北方农业有限公司是一家农业种植、养生食品研发、生产、销售为一体的全产业链企业。
          主营三大板块：农业、大健康、数字营销
        </p>
      </section>

      <!-- 三大板块 -->
      <section class="section plate-section">
        <h2 class="section-title">
          THREE MAJOR PLATES
          <div class="cn-title">三大板块</div>
        </h2>
        <div class="plate-container">
          <div v-for="(plate, index) in plates" :key="index" class="plate-item">
            <h3 class="plate-title">{{ plate.title }}</h3>
            <p class="plate-content">{{ plate.content }}</p>
            <a href="#" class="more-link">了解更多>></a>
          </div>
        </div>
      </section>

      <!-- 产品展示 -->
      <section class="section product-section">
        <h2 class="section-title">
          PRODUCT
          <div class="cn-title">产品展示</div>
        </h2>
        <div class="product-grid">
          <div v-for="(product, index) in products" :key="index" class="product-card">
            <img :src="product.image" alt="产品图" class="product-img">
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <p>{{ product.spec }}</p>
              <a href="#" class="more-link">了解更多>></a>
            </div>
          </div>
        </div>
      </section>

      <!-- 扫码区域 -->
      <section class="section qr-section">
        <div class="qr-container">
          <img src="@/static/logo.png" alt="二维码" class="qr-img">
          <div class="qr-text">
            <div class="qr-title">扫码进入九通购物</div>
            <a href="#" class="more-link">发现更多好品>></a>
          </div>
        </div>
      </section>

      <!-- 发展规划 -->
      <section class="section plan-section">
        <h2 class="section-title">集团公司未来五年发展规划</h2>
        <ol class="plan-list">
          <li v-for="(item, index) in plans" :key="index" class="plan-item">{{ item }}</li>
        </ol>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="company-info">
          <div>CHAOYANG DABEFANG AGRICULTURAL CO.,LTD.</div>
          <div>电话：0421-27/15</div>
          <div>地址：辽宁省朝阳市</div>
        </div>
        <div class="copy-right">© 朝阳大北方农业有限公司</div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plates: [
        {
          title: '农业板块',
          content: '福果"莓中之王""抗氧化之王"具有超强的抗氧化和抗辐射能力，含有花青素、白藜芦醇、黄酮、多酚等五十多种营养素，2018年被国家卫健委新生产智慧原料。'
        },
        {
          title: '大健康板块',
          content: '以不老莓种植为主要原材料，生产研发三大系列养生产品，以"溶、通、调、补"为核心定位，让更多人因不老莓收获健康。'
        },
        {
          title: '数字营销',
          content: '紧跟数字经济步伐，建立电商营销模式，实现线上线下融合发展的新零售体系。'
        }
      ],
      products: [
        {
          name: '52度黑果不老酒',
          spec: '750ml/瓶*2瓶/提',
          image: require('@/static/logo.png')
        },
        {
          name: '黑果花青素啤酒',
          spec: '500ml/瓶*12瓶/箱',
          image: require('@/static/logo.png')
        },
        {
          name: '花楸4度',
          spec: '500ml/瓶*2瓶/提',
          image: require('@/static/logo.png')
        },
        {
          name: '不老莓原液',
          spec: '750ml/瓶*2瓶/提',
          image: require('@/static/logo.png')
        }
      ],
      plans: [
        '三年内实现线上数据500万的目标',
        '三年内完成线下加盟连锁店3000家',
        '五年内打造可容纳十万人的福果康养基地',
        '3-5年完成线下加盟连锁销售板块整体上市',
        '八年内打造可同时入驻十万人的产业园区'
      ]
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.company-container {
  font-family: 'Microsoft YaHei', sans-serif;
  color: #1a3b5d;
  max-width: 1200px;
  margin: 0 auto;
}

/* 头部样式 */
.header {
  background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), 
              url('@/static/logo.png') no-repeat center/cover;
  padding: 20px;
}

.nav-bar {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
}

.nav-item {
  font-size: 18px;
  cursor: pointer;
  color: #666;
}

.nav-item.active {
  color: #1a3b5d;
  font-weight: bold;
}

.company-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 15px;
}

.en-title {
  font-size: 18px;
  color: #666;
  margin-top: 10px;
}

.slogan {
  text-align: center;
  font-size: 24px;
  color: #2c6e3c;
  margin-bottom: 20px;
}

.en-slogan {
  font-size: 16px;
  color: #888;
  margin-top: 10px;
}

/* 通用区块样式 */
.section {
  margin: 40px 0;
  padding: 20px;
}

.section-title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
  color: #1a3b5d;
}

.cn-title {
  font-size: 20px;
  color: #666;
  margin-top: 10px;
}

/* 三大板块样式 */
.plate-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.plate-item {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.plate-title {
  font-size: 20px;
  color: #2c6e3c;
  margin-bottom: 15px;
}

/* 产品展示样式 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.product-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
  text-align: center;
}

/* 扫码区域样式 */
.qr-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
}

.qr-img {
  width: 150px;
  height: 150px;
}

.qr-text {
  text-align: center;
}

/* 发展规划样式 */
.plan-list {
  list-style-type: decimal;
  padding-left: 30px;
}

.plan-item {
  margin: 15px 0;
  font-size: 16px;
}

/* 页脚样式 */
.footer {
  background: #1a3b5d;
  color: white;
  padding: 40px 20px;
  text-align: center;
}

.company-info {
  margin-bottom: 20px;
  line-height: 1.8;
}

.more-link {
  color: #2c6e3c;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  font-weight: bold;
}
</style>